<template>
	<div class="kComponentStyle">

		<el-form label-width="80px" :model="$currentproperties" :rules="rules" size="small" class="lef">
			<el-collapse v-model="activeNames">
				<el-collapse-item title="基本属性" name="1">
					<el-form-item label="标签宽度">
						<el-input-number v-model="$currentproperties.labelWidth" :min="1" :max="200"
							label="标签宽度"></el-input-number>
					</el-form-item>
					<el-form-item label="标签位置">
						<el-radio-group v-model="$currentproperties.labelPosition">
							<el-radio-button label="left">左侧</el-radio-button>
							<el-radio-button label="top">顶部</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="对齐方式">
						<el-radio-group v-model="$currentproperties.labelAlign">
							<el-radio-button label="left">左侧</el-radio-button>
							<el-radio-button label="center">居中</el-radio-button>
							<el-radio-button label="right">右侧</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-collapse-item>
			</el-collapse>
		</el-form>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	}
	from 'vuex'
	export default {
		name: 'kFormStyle',
		props: {
			// 	datas: Object,
		},
		computed: {
			...mapState(['$pageSchema', '$rightcom', '$leftcom', '$currentproperties', '$currentComponent'])
		},
		data() {
			return {
				activeNames: ['1'],
				rules: {
					//校验表单输入
					noticeText: [
						//页面名称
						{
							required: true,
							message: '请输入公告',
							trigger: 'blur'
						},
					],
				},
				predefineColors: [
					// 颜色选择器预设
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'#409EFF',
					'#909399',
					'#C0C4CC',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				],
				colItemDefault: {
					span: 12,
					offset: 0,
					push: 0,
					pull: 0,
					pageComponents: []
				}
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.kComponentStyle {


		/* 颜色选择器 */
		.picke {
			float: right;
		}
	}
</style>